<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>A使用jsx创建虚拟DOM.html</title>
</head>
<body>

<div id="test">

</div>

<div id="demo">

</div>


<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

<!-- jsx转为js -->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

<script type="text/babel">

    const vDom = ( //它会把这个翻译成 上面的
            <h1 id="title"><span>hello,react</span></h1>
    )

    ReactDOM.render(vDom, document.getElementById("test"))

    console.log(vDom) // 虚拟dom就是一个对象
    console.log(typeof vDom)

    /*
    虚拟dom属性少，比较轻， 真实dom属性多，比较重
     */
    let tDom = document.getElementById("demo")
    console.log("真实dom" + tDom)
</script>
</body>
</html>